import {Constant} from '../Constant.js';
import {TableElement} from '../bean/TableElement.js';
import {TableAttribute} from '../bean/TableAttribute.js';

class ElementUtils {
  static generateInputElement(id, tableAttribute = new TableAttribute()
    , isNeedBindPoint = Constant.NEED_TO_BIND_POINT, elementStatus = Constant.STATUS_NORMAL_ELEMENT) {
    const elementView = this.generateInputElementView();
    const element = new TableElement(isNeedBindPoint, tableAttribute);
    // element.labelName = tableAttribute.labelName;
    elementView.children[0].value = tableAttribute.labelName;
    switch (elementStatus) {
      case Constant.STATUS_SUBTABLE_ELEMENT:
        // elementView.style.marginLeft = '20px';
        break;
      case Constant.STATUS_TITLE_ELEMENT:
        elementView.style.background = '#48A8E8';
        elementView.style.color = 'white';
        break;
    }
    const parentElement = document.createElement('div');
    parentElement.appendChild(elementView);
    parentElement.style.width = 'fit-content';
    parentElement.style.height = 'fit-content';
    parentElement.id = id;
    element.elementView = parentElement;
    return element;
  }
  static generateElement(id, tableAttribute = new TableAttribute(),
    isNeedBindPoint = Constant.NEED_TO_BIND_POINT, elementStatus = Constant.STATUS_NORMAL_ELEMENT, isLastRowInSubTable = false) {
    const elementView = this.generateCommonElementView();
    const element = new TableElement(isNeedBindPoint, tableAttribute);
    elementView.innerText = tableAttribute.labelName;
    elementView.style.overflow = 'hidden';
    elementView.style.textOverflow = 'ellipsis';
    elementView.style.whiteSpace = 'nowrap';
    const parentElement = document.createElement('div');
    parentElement.style.margin = '1px';
    switch (elementStatus) {
      case Constant.STATUS_SUBTABLE_ELEMENT:
      {
        if (isLastRowInSubTable) {
          elementView.innerText = `└─${elementView.innerText}`;
        } else elementView.innerText = `├─${elementView.innerText}`;
      }
      // eslint-disable-next-line no-fallthrough
      case Constant.STATUS_NORMAL_ELEMENT:
      {
        if (isNeedBindPoint) {
          elementView.style.border = '1px solid gray';
        } else {
          parentElement.style.background = '#777777';
          elementView.style.color = 'white';
        }
        break;
      }
      case Constant.STATUS_TITLE_ELEMENT:
        elementView.style.background = '#48A8E8';
        elementView.style.color = 'white';
        break;
    }
    parentElement.appendChild(elementView);
    parentElement.style.width = 'fit-content';
    parentElement.style.height = 'fit-content';
    parentElement.id = id;
    element.elementView = parentElement;
    return element;
  }


  static generateCommonElementView() {
    const pointElement = document.createElement('div');
    pointElement.style.paddingLeft = '10px';
    pointElement.style.paddingRight = '10px';
    pointElement.style.display = 'inline-block';
    pointElement.style.width = '168px';
    pointElement.style.height = '20px';
    pointElement.style.fontSize = '14';
    pointElement.style.verticalAlign = 'top';
    // pointElement.style.lineHeight = '20px';
    return pointElement;
  }

  static generateInputElementView() {
    const pointDiv = document.createElement('div');
    pointDiv.style.width = 'fit-content';
    pointDiv.style.border = '1px solid gray';
    const pointElement = document.createElement('input');
    pointElement.style.width = '168px';
    pointElement.style.height = '100%';
    pointElement.style.paddingLeft = '10px';
    pointElement.style.paddingRight = '10px';
    pointElement.style.outline = 'none';
    pointElement.style.border = 'none';
    pointElement.style.background = '#eeeeee';
    // pointDiv.style.position = 'relative';
    pointDiv.style.margin = '1px';
    pointDiv.style.background = '#eeeeee';
    pointDiv.style.display = 'inline-block';
    pointDiv.appendChild(pointElement);
    return pointDiv;
  }
  static generateSettingAreaView() {
    const diagramContainer = document.createElement('div');
    const windowWidth = $(window).width() -20;
    diagramContainer.style.width = `${windowWidth>1000 ? windowWidth : 1000}px`;
    diagramContainer.style.display = 'flex';// ?
    diagramContainer.style.alignItems = 'stretch';
    diagramContainer.style.paddingTop = '10px';
    diagramContainer.style.paddingBottom = '10px';
    diagramContainer.style.backgroundColor = 'white';
    return diagramContainer;
  }
  static generateGraphElementView() {
    const graph_area = document.createElement('div');
    const windowWidth = $(window).width() -20;
    graph_area.style.width = `${windowWidth>1000 ? windowWidth : 1000}px`;
    graph_area.style.height = 'fit-content';
    // analyze_area.style.margin = '10px';
    graph_area.style.padding = '10px';
    graph_area.style.background = 'white';
    graph_area.id = 'tab_graph';
    return graph_area;
  }
  static generateGraphContainer() {
    const graph_container = document.createElement('div');
    graph_container.style.width = '100%';
    graph_container.id = 'graph_container';
    return graph_container;
  }
  static generateaQueryElementView() {
    const queryElement = document.createElement('textarea');
    queryElement.placeholder = 'query';
    queryElement.style.height = '80px';
    queryElement.style.width = '90%';
    queryElement.style.marginRight = '10px';
    queryElement.style.resize = 'none';
    return queryElement;
  }
  static generateTabView(tabViewIds, tabTexts) {
    const tabView = document.createElement('div');
    tabView.id = 'tab_view';
    tabView.style.height = 'fit-content';
    tabView.style.width = 'fit-content';
    const ul = document.createElement('ul');
    const li0 = document.createElement('li');
    const a0 = document.createElement('a');
    a0.href = `#${tabViewIds[0]}`;
    a0.innerHTML = tabTexts[0];
    li0.appendChild(a0);
    ul.appendChild(li0);
    const li1 = document.createElement('li');
    const a1 = document.createElement('a');
    a1.href = `#${tabViewIds[1]}`;
    a1.innerHTML = tabTexts[1];
    li1.appendChild(a1);
    ul.appendChild(li1);
    tabView.appendChild(ul);
    return tabView;
  }
  static generateElementsListView() {
    const elementsListView = document.createElement('div');
    elementsListView.style.display = 'inline-block';
    elementsListView.style.marginLeft = '10px';
    elementsListView.style.marginRight = '100px';
    elementsListView.style.verticalAlign = 'top';
    return elementsListView;
  }
  static generateTitleBarElementView() {
    const titleBarElementView = document.createElement('div');
    titleBarElementView.style.height = 'fit-content';
    titleBarElementView.style.width = 'fit-content';
    return titleBarElementView;
  }
  static generateTitleElement() {
    const titleElement = document.createElement('div');
    titleElement.style.padding = '10px';
    titleElement.style.background = 'white';
    titleElement.style.border = '1px solid gray';
    titleElement.style.display = 'inline-block';
    return titleElement;
  }
  static generateContactElementsContainer() {
    const contact_elements_area_container = document.createElement('div');
    contact_elements_area_container.style.width = '100%';
    // contact_elements_area_container.style.display = 'flex -webkit-flex';
    // contact_elements_area_container.style.alignItems = 'stretch';
    contact_elements_area_container.style.height = 'fit-content';
    contact_elements_area_container.style.padding = 0;
    return contact_elements_area_container;
  }
  static generateTextField(text) {
    const textField = document.createElement('div');
    textField.innerText = text;
    textField.style.padding = '2px';
    return textField;
  }
  static generateQuerysArea() {
    const query_elements_area = document.createElement('div');
    query_elements_area.style.padding = '10px';
    query_elements_area.style.width = '60%'
    query_elements_area.style.border = '1px solid gray';
    return query_elements_area;
  }
  static generateSaveStatusButton(text) {
    const button = document.createElement('button');
    button.classList.add('kintoneplugin-button-normal');
    button.innerText = text;
    button.style.color = 'white';
    button.style.background = '#48A8E8';
    return button;
  }
  static generateResultListyArea() {
    const result_list = document.createElement('div');
    result_list.style.border = '1px solid gray';
    result_list.style.marginRight = '20px';
    result_list.style.padding = '0px';
    result_list.style.width = '192px';
    result_list.style.display = 'inline-block';
    return result_list;
  }
  static generateShowGraphButton(text) {
    const showTable = document.createElement('button');
    showTable.classList.add('kintoneplugin-button-normal');
    showTable.innerText = text;
    showTable.id = Constant.SHOW_GRAPH_BT_ID;
    showTable.style.verticalAlign = 'top';
    showTable.style.background = '#48A8E8';
    showTable.style.color = 'white';
    return showTable;
  }
  static addTextFieldTitle(text, element) {
    element.style.marginTop = '25px';
    element.style.position = 'relative';
    const textTitle = this.generateTextField(text);
    textTitle.style.height = '20px';
    textTitle.style.position = 'absolute';
    textTitle.style.top = '-25px';
    element.appendChild(textTitle);
  }
  static addResultFieldTitle(text, element) {
    element.style.marginTop = '25px';
    element.style.position = 'relative';
    const textTitle = this.generateTextField(text);
    textTitle.style.height = '20px';
    textTitle.style.position = 'absolute';
    textTitle.style.top = '-25px';
    textTitle.style.width = '94%';
    textTitle.style.color = 'white';
    textTitle.style.background = '#48A8E8';
    textTitle.style.paddingLeft = '5%';
    element.appendChild(textTitle);

  }
}

export {
  ElementUtils
};